<template>
	<view class="main">
		<view class="head">
			<image class="logo" :src="userinfo.avatar?userinfo.avatar:'/static/logo.jpg'" mode=""></image>
			<view class="inden">
				{{userinfo.nickname}}
			</view>
		</view>
		<view class="income">
			<view class="item">
				<view class="number">{{amountData.this_month_money}}</view>
				<view class="title">
					当月收益
				</view>
			</view>
			<view class="item">
				<view class="number">{{amountData.this_day_money}}</view>
				<view class="title">
					今日收益
				</view>

			</view>
			<view class="item">
				<view class="number">{{amountData.money}}</view>
				<view class="title">
					可提现收益
				</view>

			</view>
		</view>
		<view class="apply" @click="withdrawal">
			申请提现
		</view>
		<view class="user">
			<view class="menu" @click="wallet">
				<view class="icon">
					<image class="icon-img" src="../../static/user_icon4.png" mode="widthFix"></image>
				</view>
				<view class="name">
					我的钱包
				</view>

			</view>
			<view class="menu" @click="customer">
				<view class="icon">
					<image class="icon-img" src="../../static/user_icon1.png" mode="widthFix"></image>
				</view>
				<view class="name">
					我的客户
				</view>

			</view>
			<view class="menu" @click="userInfo">
				<view class="icon">
					<image class="icon-img" src="/static/user_icon3.png" mode="widthFix"></image>
				</view>
				<view class="name">
					个人信息
				</view>

			</view>
			<!-- <view class="menu">
				<view class="icon">
					<image class="icon-img" src="../../static/user_icon2.png" mode="widthFix"></image>
				</view>
				<view class="name">
					我的订单
				</view>

			</view> -->
			<!-- <view class="menu">
				<view class="icon">
					<image class="icon-img" src="../../static/user_icon5.png" mode="widthFix"></image>
				</view>
				<view class="name">
					学员成绩
				</view>

			</view> -->

		</view>
		<view class="btn" @click="shopping">
			<image class="icon" src="../../static/vip.png" mode="widthFix"></image> 商城 <image class="get"
				src="../../static/get.png" mode="widthFix"></image>
		</view>
		<view class="btn" @click="shareCoach" v-if="level == 1">
			<image class="icon" src="../../static/scan.png" mode="widthFix"></image> 帮教练
			<image class="get" src="../../static/get.png" mode="widthFix"></image>
		</view>
		<view class="btn" @click="shareStudent">
			<image class="icon" src="../../static/scan.png" mode="widthFix"></image> 帮学员
			<image class="get" src="../../static/get.png" mode="widthFix"></image>
		</view>
		<view class="btn" @click="exchange">
			<image class="icon" src="../../static/exchange.png" mode="widthFix"></image> 兑换会员 <image class="get"
				src="../../static/get.png" mode="widthFix"></image>
		</view>
		<!-- <view class="btn" @click="other">
			<image class="icon" src="../../static/other.png" mode="widthFix"></image> 其他 <image class="get"
				src="../../static/get.png" mode="widthFix"></image>
		</view> -->
		<view class="btn" @click="service">
			<image class="icon" src="../../static/service.png" mode="widthFix"></image> 联系客服 <image class="get"
				src="../../static/get.png" mode="widthFix"></image>
		</view>

		<u-button @click="loginOut" class="login-out">退出登录</u-button>
		<u-popup v-model="show" mode="bottom">
			<view class="popup">
				<view class="service">
					客服电话：155555555555
				</view>
				<view class="service">
					上班时间：（7:00-21:00）
				</view>
				<view class="boda" @click="callPhone">
					点击拨号
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import {
		userinfo,
		myAmount
	} from "@/api/index.js"
	export default {
		data() {
			return {
				show: false,
				userinfo: "",
				amountData: '',
				level: ''
			};
		},
		mounted() {

			myAmount().then(res => {
				this.amountData = res.data
			})
		},
		onShow() {
			userinfo().then(res => {
				this.userinfo = res.data
				this.level = res.data.level
				uni.setStorageSync("userInfo", res.data)
			})
		},
		methods: {
			callPhone() {
				window.location.href = 'tel:1234567890';
			},
			//退出登录
			loginOut() {
				uni.clearStorage()
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			shopping() {
				uni.navigateTo({
					url: "/pages/vip/shoppingMall"
				})
			},
			//教练
			shareCoach() {
				uni.navigateTo({
					url: "/pages/user/share"
				})

			},
			shareStudent() {
				uni.navigateTo({
					url: "/pages/user/shareStudent"
				})

			},
			//兑换会员
			exchange() {
				uni.navigateTo({
					url: "/pages/user/exchangeVip"
				})
			},
			//客服
			service() {
				this.show = true
			},
			// 提现
			withdrawal() {
				uni.navigateTo({
					url: "/pages/withdrawal/protocol"
				})
			},

			// 我的钱包
			wallet() {
				uni.navigateTo({
					url: "/pages/wallet/wallet"
				})
			},
			// 我的客户
			customer() {
				uni.navigateTo({
					url: "/pages/user/customer"
				})
			},
			// 个人信息
			userInfo() {
				uni.navigateTo({
					url: "/pages/user/userInfo"
				})
			},
			other() {
				uni.navigateTo({
					url: "/pages/user/other"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.main {
		padding-bottom: 50rpx;
		background-color: #F3F5F8;
	}

	.popup {
		padding: 26rpx 0;

		.service {
			text-align: center;
			background-color: #fff;
			padding: 10rpx 0;
		}

		.boda {
			text-align: center;
			border-top: 1px solid #f2f2f2;
			padding-top: 26rpx;
		}
	}


	.head {
		background-color: #3B81F3;
		padding: 50rpx 0;
		text-align: center;

		.logo {
			display: block;
			margin: 0 auto;
			width: 150rpx;
			height: 150rpx;
			object-fit: cover;
			border-radius: 100%;
		}

		.inden {
			margin-top: 30rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.apply {
		width: 200rpx;
		font-size: 28rpx;
		color: #fff;
		margin: 0 auto;
		margin-top: -30rpx;
		height: 60rpx;
		background-color: #3B81F3;
		line-height: 60rpx;
		border-radius: 40rpx;
		text-align: center;
	}

	.login-out {
		width: 90%;
		margin-top: 20px;
		border: none;
	}

	.income {
		background-color: #fff;
		width: 90%;
		margin-left: 5%;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		margin-top: -40rpx;

		.item {
			flex: 1;
			text-align: center;
			padding: 40rpx 0;

			.number {
				font-size: 40rpx;
				margin-bottom: 20rpx;
				color: #000;
			}

			.title {
				font-size: 32rpx;
				color: #656565;
			}
		}
	}

	.user {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: #fff;
		margin-top: 60rpx;
		padding: 40rpx 26rpx;
		justify-content: space-around;

		.menu {
			font-size: 32rpx;
			text-align: center;
			color: #656565;
			width: 120rpx;
			font-size: 28rpx;

			.icon {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f2f2f2;
				height: 120rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				margin-bottom: 10rpx;

				.icon-img {
					width: 60rpx;
				}
			}
		}

		.menu:nth-child(4n) {
			margin-right: 0;
		}
	}

	.btn {
		padding: 26rpx;
		color: #656565;
		font-size: 28rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		width: calc(100% - 52rpx);
		margin-left: 26rpx;
		display: flex;
		align-items: center;

		.icon {
			width: 40rpx;
			margin-right: 10rpx;
		}

		.get {
			width: 40rpx;
			margin-left: auto;
		}
	}
</style>